<template>
  <section>
    <el-button size="mini" type="primary" @click="addTabBtn">+</el-button>
    <el-tabs v-model="tabName" type="border-card" closable @tab-remove="removeTab"  v-if="tabs.length >0">
      <el-tab-pane :label="tab.title" :name="tab.name" v-for="(tab,index) in tabs" :key="index">
        <el-form label-width="60px">
          <el-form-item label="标题">
            <el-input size="mini" v-model="tabs[index].title" style="width: 30%"></el-input>
          </el-form-item>
          <el-form-item label="内容" >
            <el-row v-for="(ad,index) in currAds" :key="index">
              <featured-box :ad="currAds[index]"></featured-box>
            </el-row>
            <!--<featured-ad :lightBoxId="currPosition" v-on:newAd="newAdBtn" v-on:editAd="editAdBtn" v-on:delAd="delAdBtn"></featured-ad>-->
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
  import featuredBox from './featuredBox'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "tabAd",
    components:{featuredBox},
    props:['lightBoxId'],
    data(){
      return {
        tabName:null,
        currItem:null,
        tabPaneName:'detail',
        tabs:null,
        currPosition:null
      }
    },
    watch:{
      lightBoxId(nv,ov){
        if(nv) this.init(nv)
      },
      tabName(nv,ov){
        console.log('切换标签页了————————',nv)
        this.getCurrPosition()
      },
    },
    created(){
      this.init(this.lightBoxId)
      console.log('adPosition——————————————————',this.adPosition)
      this.init()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(){
        this.getAds(0,lightBoxId)
      },
      getAds(pageNo,lightBoxId,sizeNo){
        this.fetch({name:"getAdList",data:{page:pageNo?pageNo:0,lightBoxId,size:sizeNo?sizeNo:''}})
          .then(res=>{
            if(res.content.length<=0){
              this.$message({type:'info',message:'当前位置无广告，请新建！'})
              return
            }
            if(res.content.length<res.totalElements){
              this.getAds(0,lightBoxId,res.totalElements)
            }else {
              console.log('灯箱下所有的ad',res.content)
              this.getTabs(res.content)//制作tab标签页
              return
              this.currAds=res.content
              this.currItem=this.currAds[0]
              this.currAds.forEach(item=>{
                if(item.img === undefined){
                  Vue.set(item,'img','')
                }
              })
              let array=this.currAds
              if(array.length <=0){
                this.tabs=[]
                return
              }else{
                this.tabName=array[0].data.tab.name
              }
              console.log('进入tabs制作？？？？')
              this.getTabs(array)
              this.newAdDialog=false
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getTabs(array){
        console.log('进入tabs制作')
        let tmp=[]
        array.forEach(a=>{
          let index = tmp.findIndex(t=>t.name === a.data.tab.name)
          if(index <0){
            tmp.push(a.data.tab)
          }
        })
        this.tabs=tmp
        console.log('tabs到底是啥？？？',this.tabs)
        this.tabName = this.tabs[0].name
        this.getCurrPosition()
      },
      getCurrPosition(){
        this.currPosition={id:this.lightBoxId}
        let ads=[]
        this.currAds.forEach(a=>{
          if(a.data.tab.name === this.currTab.name){
            ads.push(a)
          }
        })
        this.currPosition.ad=ads
        console.log(this.currPosition)
      },
      addTabBtn(){
        let tab={ title:'',name:''+this.tabs.length,type:null }
        this.tabs.push(tab)
        console.log(this.tabs)
        this.currTab = this.tabs[this.tabs.length-1]
        this.tabName=this.currTab.name
        this.currPosition={ad:[],id:this.lightBoxId}
      },
      removeTab(targetName) {
        console.log(targetName)
        this.currTab=this.tabs.find(tab=>tab.name === targetName)
        let tmp=[]
        this.currAds.forEach(a=>{
          if(a.data.tab.name === targetName){
            tmp.push(a)
          }
        })
        console.log(tmp)
        this.confirmDel(tmp)
      },
      newAdBtn(e){
        console.log('ppt传来新建ad的事件——————',this.currTab)
        let currAd={
          description:'第'+ (this.currAds.length+1)+'个推荐',
          img:'',data:{
            prices:'',discount:'',tab:this.currTab
          },
          contentType:null,contentValue:null,departmentId:'空'
        }
        this.$emit('newAd',currAd)
      },
      editAdBtn(e){
        console.log('要编辑了————————',e)
        this.$emit('editAd',e)
      },
      delAdBtn(e){
        this.$emit('delAd',e)
      },
      confirmDel(e){
        this.$confirm('确认删除？')
          .then(()=> {
            this.delAd(e)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      delAd(e){
        this.fetch({name:"deleteAd",data:{id:e[0].id}})
          .then(res=>{
            console.log('删除成功')
            e.splice(0,1)
            if(e.length>0){
              this.delAd(e)
            }else {
              let index=this.tabs.findIndex(tab=>tab.name === this.currTab.name)
              this.tabs.splice(index,1)
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
